<template>
  <div>
    <div class="header">
      <div class="back" @click="backHome()">
        <el-icon style="font-size: 22px; color: #f8d57e">
          <HomeFilled />
        </el-icon>
      </div>
      <div
        style="
          margin-left: 80px;
          margin-top: -30px;
          margin-bottom: 20px;
          color: white;
          font-size: 28px;
          font-family: Montserrat;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.2px;
          word-wrap: break-word;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
        "
      >
        TRANSACTION_ASSISTANT
      </div>
      <div style="width: 50%; height: 100%; display: inline-block">
        <div class="tip2">设置你的</div>
      </div>
      <div style="width: 50%; height: 100%; display: inline-block">
        <div class="tip">
          <div>周计划</div>
          <input
            v-model="planName"
            style="
              width: 130px;
              text-align: center;
              border: 0;
              color: #f8d57e;
              background-color: white;
              box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.2);
              margin-top: 20px;
              border-radius: 10px;
              font-size: 22px;
              padding: 15px 25px 15px 20px;
            "
          />
        </div>
        <div class="day">
          {{ weekName }}
          <div class="finish-button" @click="finishPlan">完成制定</div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="last-button" @click="toLastDay()">last</div>
      <div class="transaction-list">
        <el-scrollbar height="100%">
          <div class="transaction" v-for="task in tasksFormPlan" :key="task.id">
            <div class="head">
              <div style="display: inline-block; align-items: center">
                {{ task.taskTitle }}
              </div>
              <div style="float: right">
                {{ task.dayOfWeek }} {{ task.time.slice(11, 16) }}
              </div>
            </div>
            <div>{{ task.content }}</div>
            <div
              style="
                float: right;
                margin-top: 10px;
                font-size: 18px;
                cursor: pointer;
              "
              @click="deleteTaskFromPlan(task.id)"
            >
              <el-icon><Failed /></el-icon>
            </div>
          </div>
          <div class="submit" @click="addtaskDialogVisible = true">
            <div>+</div>
          </div>
        </el-scrollbar>
      </div>
      <div class="next-button" @click="toNextDay()">next</div>
    </div>
    <el-dialog
      style="border-radius: 30px; min-height: 60%; padding: 20px"
      v-model="addtaskDialogVisible"
      width="63%"
      draggable
    >
      <div style="font-size: 23px; color: #f4b860; margin-left: 20px">
        日计划-新增事务
      </div>
      <div style="display: inline-block; width: 50%; height: 80%">
        <div class="item">
          <div class="label">事务标题</div>
          <input
            type="text"
            class="input-box"
            v-model="addTaskForm.taskTitle"
          />
        </div>
        <div class="item">
          <div class="label">事务内容</div>
          <textarea
            class="input-box"
            style="height: 140px; padding: 15px"
            v-model="addTaskForm.content"
          ></textarea>
        </div>
      </div>
      <div style="display: inline-block; width: 50%; height: 80%">
        <div class="item">
          <div class="label">提醒时间</div>

          <el-date-picker
            v-model="addTaskForm.time"
            type="datetime"
            placeholder="Select date and time"
          />
        </div>
        <div class="item">
          <div class="label">提醒级别</div>
          <div
            class="input-box"
            style="background-color: white; height: 70px; width: 240px"
          >
            <el-radio-group
              v-model="addTaskForm.reminderLevel"
              style="margin: 0 auto; margin-top: 20px"
            >
              <el-radio label="1" size="small">一般</el-radio>
              <el-radio label="2" size="small">重要</el-radio>
              <el-radio label="3" size="small">关键</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>

      <div style="text-align: center; margin-top: 10%">
        <button
          style="
            height: 50px;
            width: 120px;
            border: 0;
            background-color: #f8d57e;
            color: white;
            border-radius: 50px;
            font-size: 16px;
            font-weight: lighter;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 设置盒子阴影效果 */
          "
          @click="addTaskForPlan"
        >
          确认新增
        </button>
      </div>
    </el-dialog>

    <el-dialog
      v-model="weekPlanDialogVisible"
      title="为周计划起名"
      width="450"
      align-center
    >
      <el-input
        v-model="planName"
        style="margin-left: 20%; width: 50%"
        placeholder="这里输入名称"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addPlan">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  addTaskByWeeklyPlan,
  addWeeklyPlan,
  getWeeklyPlanIdByName,
  deleteWeeklyPlanById,
  getTaskFromWeeklyPlan,
} from '@/api/weeklyplan'
import { AddTaskByWeeklyPlanParams } from '@/api/weeklyplan/type'
import { deleteTask } from '@/api/task'
import { AllTaskList } from '@/api/task/type'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const backHome = async () => {
  ElMessageBox.alert('未完成制定将不会保存此计划', '提示', {
    confirmButtonText: 'OK',
    callback: async (action: Action) => {
      try {
        const res = await deleteWeeklyPlanById(addTaskForm.weeklyPlanId)
        console.log(res)
      } catch (e) {
        Promise.reject(e)
      }
      router.push('/home')
    },
  })
}
//枚举星期几
enum week {
  '星期一' = 1,
  '星期二' = 2,
  '星期三' = 3,
  '星期四' = 4,
  '星期五' = 5,
  '星期六' = 6,
  '星期日' = 7,
}
const weekArray = [
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
  '星期日',
]
//具体星期几
const weekNames = Object.keys(week).filter((key) => isNaN(Number(key)))
const weekValues = []
for (const key in week) {
  if (isNaN(Number(key))) {
    weekValues.push(week[key])
  }
}
const weekName = ref(weekNames[0])
const weekValue = ref(weekValues[0])
const toLastDay = () => {
  if (weekValue.value > 1) {
    weekValue.value = weekValue.value - 1
    weekName.value = weekNames[weekValue.value - 1]
    addTaskForm.dayOfWeek = weekArray[weekValue.value - 1]
    console.log(weekName.value, addTaskForm.dayOfWeek)
  }
}
const toNextDay = () => {
  if (weekValue.value < 7) {
    weekValue.value = weekValue.value + 1
    weekName.value = weekNames[weekValue.value - 1]
    addTaskForm.dayOfWeek = weekArray[weekValue.value - 1]
    console.log(weekName.value, addTaskForm.dayOfWeek)
  }
}
const addtaskDialogVisible = ref(false)
const radio = ref(1)
const valueDate = ref('')
let addTaskForm = reactive<AddTaskByWeeklyPlanParams>({
  taskTitle: '',
  content: '',
  time: '',
  dayOfWeek: '星期一',
  reminderLevel: 0,
  weeklyPlanId: 0,
})
const weekPlanDialogVisible = ref<boolean>(false)
onMounted(async () => {
  weekPlanDialogVisible.value = true
})
//初始化周计划名
const planName = ref<string>('')
const addPlan = async () => {
  weekPlanDialogVisible.value = false
  try {
    const res = await addWeeklyPlan(planName.value)
    if (res.data != 1) {
      ElMessageBox.alert(res.message, '提示', {
        confirmButtonText: 'OK',
        callback: (action: Action) => {
          backHome()
        },
      })
    } else {
      ElMessage({
        showClose: true,
        message: res.message,
        type: 'success',
      })
      const { data } = await getWeeklyPlanIdByName(planName.value)
      addTaskForm.weeklyPlanId = data
    }
  } catch (e) {
    Promise.reject(e)
  }
}
//增加周计划事务
const addTaskForPlan = async () => {
  try {
    const { message } = await addTaskByWeeklyPlan(addTaskForm)
    ElMessage({
      showClose: true,
      message: message,
      type: 'success',
    })
  } catch (e) {
    Promise.reject(e)
  }
  await getTasksFromPlan()
  addtaskDialogVisible.value = false
}
//获取周计划下的事务
const tasksFormPlan = ref<AllTaskList[]>()
const getTasksFromPlan = async () => {
  try {
    const { data } = await getTaskFromWeeklyPlan(addTaskForm.weeklyPlanId)
    tasksFormPlan.value = data
    console.log(tasksFormPlan.value)
  } catch (e) {
    Promise.reject(e)
  }
}
//完成制订
const finishPlan = async () => {
  ElMessageBox.alert('完成制定周计划，即将返回主页', '提示', {
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      router.push('/home')
    },
  })
}
//周计划事务删除
const deleteTaskFromPlan = async (id: number) => {
  ElMessageBox.confirm('确认删除该事务吗?', '提示', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning',
  })
    .then(async () => {
      try {
        const { message } = await deleteTask(id)
        await getTasksFromPlan()
        ElMessage({
          showClose: true,
          message: message,
          type: 'success',
        })
      } catch (e) {
        Promise.reject(e)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>

<style scoped>
.back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: white;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 设置盒子阴影效果 */
  border-radius: 8px;
  margin-top: 30px;
  margin-left: 20px;
}
.header {
  padding: 10px;
  height: 45vh;
  width: 100%;
  background-color: #f7d57e;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
}
.tip {
  color: white;
  font-size: 42px;
  float: right;
  margin-top: 30px;
  margin-right: 30px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.tip2 {
  position: absolute;
  top: 24%;
  left: 20%;
  color: white;
  font-size: 62px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.day {
  display: inline-block;
  position: absolute;
  top: 34%;
  left: 60%;
  color: white;
  font-size: 82px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.finish-button {
  display: inline-block;
  background-color: white;
  margin-left: 60px;
  padding: 10px 20px 10px 20px;
  border-radius: 50px;
  font-size: 19px;
  color: #f8d57e;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  /*box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.2); !* 设置内部阴影 *!*/
}
.main {
  width: 100%;
  height: 55%;
}
.last-button {
  float: left;
  margin-top: 8%;
  margin-left: -10px;
  width: 70px;
  height: 180px;
  border-radius: 10px;
  background-color: #f8d57e;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  writing-mode: vertical-rl; /* 文字竖直从右到左排列 */
  text-orientation: upright; /* 文字保持正向 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 24px;
  color: white;
  letter-spacing: 14px; /* 设置字符间距为2像素 */
  cursor: pointer;
}
.next-button {
  float: right;
  margin-top: 8%;
  margin-right: -10px;
  width: 70px;
  height: 180px;
  border-radius: 10px;
  background-color: #f8d57e;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  writing-mode: vertical-rl; /* 文字竖直从右到左排列 */
  text-orientation: upright; /* 文字保持正向 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 24px;
  color: white;
  letter-spacing: 14px; /* 设置字符间距为2像素 */
  cursor: pointer;
}
.transaction-list {
  display: inline-block;
  margin-left: 16%;
  width: 60%;
  height: 50vh;
  /*background-color: #F4B860;*/
  padding: 20px;
  /*border: 1px solid #F4B860;*/
}
.transaction {
  margin-top: 50px;
  margin-left: 12%;
  margin-right: 8%;
  background-color: #e9ebef;
  border-radius: 20px;
  display: inline-block;
  width: 300px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  vertical-align: top; /* 将.transaction元素顶部对齐 */
  padding: 20px;
  line-height: 1.5;
  color: #5d6565;
}
.head {
  margin-bottom: 10px;
}
.submit {
  width: 60px;
  height: 60px;
  background-color: #f8d57e;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 设置盒子阴影效果 */
  border-radius: 8px;
  margin: 0 auto;
  color: white;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 30px;
}
.item {
  margin-left: 10%;
  margin-top: 10%;
  display: flex;
  align-items: flex-start;
}
.label {
  font-size: 12px;
  display: inline-block;
  margin-right: 20px;
}
.input-box {
  margin-left: 10px;
  width: 300px;
  height: 60px;
  border: none;
  outline: none;
  border-radius: 25px;
  padding-left: 20px;
  font-size: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
</style>
